<template>
  <div class="container-page-upload-manager">
    <div class="container-item-nav">
      <div class="item-nav">
        <router-link
          v-for="(temp,index) in routerArray"
          :key="index"
          class="item-link"
          :class="isRoutePath(temp.link)&&'active'"
          :to="routePath(temp.link)"
        >{{ temp.name }}</router-link>
      </div>
    </div>
    <div class="container-router-view">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    routerArray: {
      type: Array,
      default() {
        return [
          { link: '/', name: '测试标签' },
          { link: '/', name: '测试标签' },
          { link: '/', name: '测试标签' }
        ];
      }
    }
  },
  methods: {
    isRoutePath(path) {
      const fullPath = this.$route.path;
      const baseUrl = fullPath.slice(0, fullPath.lastIndexOf('/') + 1);
      return baseUrl + path === this.$route.path;
    },
    routePath(path) {
      const fullPath = this.$route.path;
      const baseUrl = fullPath.slice(0, fullPath.lastIndexOf('/') + 1);
      return baseUrl + path;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.container-page-upload-manager {
  .container-item-nav {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #e7e7e7;
  }
  .container-router-view {
    padding: 50px;
    height: calc(100vh - 101px);
    overflow-x: auto;
    position: relative;
  }
  .item-nav {
    margin: auto;
    height: 50px;
    display: flex;
    .item-link {
      display: block;
      margin: 0 35px;
      line-height: 50px;
      font-size: 14px;
    }
    .active {
      height: 100%;
      border-bottom: 1px solid $menuActiveText;
      color: $menuActiveText;
    }
  }
}
</style>
